/**
 * 全局样式混入 (Mixins)
 * 可复用的样式片段
 */

/* ========== 布局混入 ========== */
// Flexbox 居中
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Flexbox 垂直居中
@mixin flex-align-center {
  display: flex;
  align-items: center;
}

// Flexbox 两端对齐
@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// Flexbox 列布局
@mixin flex-column {
  display: flex;
  flex-direction: column;
}

/* ========== 文本混入 ========== */
// 单行文本溢出省略
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本溢出省略
@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 文本禁止选择
@mixin user-select-none {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ========== 定位混入 ========== */
// 绝对定位居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 全屏覆盖
@mixin full-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ========== 卡片混入 ========== */
// 基础卡片样式
@mixin card-base {
  background: white;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-base;
  padding: $spacing-lg;
}

// 悬浮卡片效果
@mixin card-hover {
  transition: all $transition-base $transition-ease;
  
  &:active {
    transform: translateY(-4rpx);
    box-shadow: $shadow-lg;
  }
}

/* ========== 按钮混入 ========== */
// 基础按钮样式
@mixin button-base {
  border: none;
  border-radius: $border-radius-base;
  padding: $spacing-md $spacing-lg;
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  transition: all $transition-base $transition-ease;
  cursor: pointer;
  
  &:active {
    transform: scale(0.96);
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

// 主按钮样式
@mixin button-primary {
  @include button-base;
  background: $primary-gradient;
  color: white;
  box-shadow: $shadow-base;
  
  &:active:not(:disabled) {
    box-shadow: $shadow-md;
  }
}

// 次按钮样式
@mixin button-secondary {
  @include button-base;
  background: $bg-gray;
  color: $text-primary;
  
  &:active:not(:disabled) {
    background: $bg-light-gray;
  }
}

/* ========== 动画混入 ========== */
// 淡入动画
@mixin fade-in($duration: $transition-base) {
  animation: fadeIn $duration $transition-ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 滑入动画
@mixin slide-in-up($duration: $transition-base) {
  animation: slideInUp $duration $transition-ease;
}

@keyframes slideInUp {
  from {
    transform: translateY(40rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// 缩放动画
@mixin scale-in($duration: $transition-base) {
  animation: scaleIn $duration $transition-ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

// 旋转动画
@mixin rotate($duration: 1s) {
  animation: rotate $duration linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 脉冲动画
@mixin pulse($duration: 2s) {
  animation: pulse $duration ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

// 浮动动画
@mixin float($duration: 3s) {
  animation: float $duration ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8rpx);
  }
}

/* ========== 渐变混入 ========== */
// 渐变文字
@mixin gradient-text($gradient: $primary-gradient) {
  background: $gradient;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

// 渐变边框
@mixin gradient-border($gradient: $primary-gradient, $width: 2rpx) {
  border: $width solid transparent;
  background-image: linear-gradient(white, white), $gradient;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ========== 毛玻璃效果 ========== */
@mixin frosted-glass($blur: 10rpx, $opacity: 0.95) {
  background: rgba(255, 255, 255, $opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
}

/* ========== 响应式混入 ========== */
@mixin responsive($breakpoint) {
  @if $breakpoint == 'sm' {
    @media (min-width: $breakpoint-sm) {
      @content;
    }
  } @else if $breakpoint == 'md' {
    @media (min-width: $breakpoint-md) {
      @content;
    }
  } @else if $breakpoint == 'lg' {
    @media (min-width: $breakpoint-lg) {
      @content;
    }
  } @else if $breakpoint == 'xl' {
    @media (min-width: $breakpoint-xl) {
      @content;
    }
  }
}

/* ========== 滚动条样式 ========== */
@mixin scrollbar-style {
  &::-webkit-scrollbar {
    width: 8rpx;
    height: 8rpx;
  }
  
  &::-webkit-scrollbar-thumb {
    background: $border-color;
    border-radius: $border-radius-sm;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
}

